<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
        tooltip:{},
        xAxis: {
            type: 'category',
            data: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04']
        },
        yAxis: {},
        series: [
            {
                type: 'candlestick',
                itemStyle: {
                    // color0: 'pink',  // 阴线
                    // color: 'yellow' // 阳线
                },
                // barWidth: 10,
                // coordinateSystem: 'cartesian2d',
                data: [
                    [
                        8,
                        10,
                        4,
                        20
                    ],
                    [
                        15,
                        10,
                        12,
                        20,
                    ],
                    [
                        9,
                        10,
                        6,
                        12,
                    ],
                    [
                        5,
                        15,
                        10,
                        18,
                    ],
                ]
            },
            {
                type: 'line',
                data: [8, 15, 9, 5]
            }
        ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  